<template>
  <view class="post-list" :class="customClass">
    <!-- 帖子列表 -->
    <view v-for="post in posts" :key="post.id" class="post-item pixel-card" @click="handlePostClick(post)" :style="{ backgroundImage: `url(${getBackgroundImage(post)})` }">
      <!-- 背景遮罩层 -->
      <view class="post-background-mask"></view>

      <!-- 帖子内容容器 -->
      <view class="post-content-wrapper">
      <!-- 用户信息栏 -->
      <view class="post-header">
        <view class="user-info">
          <image
            :src="post.avatar || post.userAvatar || 'https://img0.baidu.com/it/u=2373091016,3150308279&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800'"
            class="user-avatar"
            mode="aspectFill"
          />
          <view class="user-details">
            <view class="username title-text">
              {{ post.nickName || '匿名用户' }}
            </view>
            <view class="post-time helper-text">
              {{ post.createTime }}
            </view>
          </view>
        </view>

        <!-- 关注按钮 -->
        <view v-if="showFollow && !post.isAnonymous" class="follow-btn" :class="{ followed: post.isFollowed }" @click.stop="handleFollowClick(post)">
          {{ post.isFollowed ? '已关注' : '关注' }}
        </view>
      </view>

      <!-- 帖子内容 -->
      <view class="post-content">
        <view class="post-title title-text" v-if="post.title">
          {{ post.title }}
        </view>
        <view class="post-text content-text">
          {{ post.content }}
        </view>
      </view>

      <!-- 图片展示 -->
      <view v-if="post.images && post.images.length > 0" class="post-images">
        <view class="image-grid">
          <image v-for="(img, imgIndex) in post.images.slice(0, 3)" :key="`${post.id}-img-${imgIndex}`" :src="img" class="post-image" mode="aspectFill" />
        </view>
      </view>

      <!-- 话题标签 -->
      <view v-if="post.tags && post.tags.length > 0" class="post-tags">
        <view v-for="tag in post.tags" :key="tag.id || tag" class="post-tag" @click.stop="handleTagClick(tag)"># {{ tag.postTagName || tag }}</view>
      </view>

      <!-- 互动数据 -->
      <view class="post-stats">
        <view class="stats-left">
          <view class="stat-item">
            <tn-icon name="fire-fill" size="38" color="#FF6B35"></tn-icon>
            <text class="stat-text">{{ post.viewCount || 0 }}</text>
          </view>
          <view class="stat-item">
            <tn-icon name="like-lack-fill" size="38" color="#FF4757"></tn-icon>
            <text class="stat-text">{{ post.likeCount || 0 }}</text>
          </view>
          <view class="stat-item">
            <tn-icon name="reply-fill" size="38" color="#5C7C9F"></tn-icon>
            <text class="stat-text">{{ post.commentCount || 0 }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多组件 -->
    <view v-if="showLoadMore" class="load-more-wrapper">
      <view v-if="loading" class="loading-content">
        <view class="loading-spinner"></view>
        <text class="loading-text">{{ loadingText }}</text>
      </view>
      <view v-else-if="!hasMore" class="no-more">
        <text class="no-more-text">{{ noMoreText }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// Props定义
const props = defineProps({
  // 帖子数据数组
  posts: {
    type: Array,
    default: () => []
  },
  // 是否显示关注按钮
  showFollow: {
    type: Boolean,
    default: true
  },
  // 自定义样式类
  customClass: {
    type: String,
    default: ''
  },
  // 是否显示加载更多
  showLoadMore: {
    type: Boolean,
    default: true
  },
  // 是否还有更多数据
  hasMore: {
    type: Boolean,
    default: true
  },
  // 是否正在加载
  loading: {
    type: Boolean,
    default: false
  },
  // 加载中文本
  loadingText: {
    type: String,
    default: '加载中...'
  },
  // 没有更多数据文本
  noMoreText: {
    type: String,
    default: '没有更多了'
  }
});

// 事件定义
const emit = defineEmits(['postClick', 'followClick', 'tagClick', 'loadMore']);

// 计算背景图片URL
const getBackgroundImage = (post) => {
  // 如果帖子有图片，使用第一张图片
  if (post.images && post.images.length > 0) {
    return post.images[0];
  }
  // 否则使用默认图片
  return 'https://img0.baidu.com/it/u=2895902758,4240700774&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800';
};

// 帖子点击事件
const handlePostClick = (post) => {
  emit('postClick', post);
};

// 关注按钮点击事件
const handleFollowClick = (post) => {
  emit('followClick', post);
};

// 话题标签点击事件
const handleTagClick = (tag) => {
  emit('tagClick', tag);
};
</script>

<style lang="scss" scoped>
// 从uni.scss导入的颜色变量作为常量
$text-color: $uni-text-color;
$text-color-inverse: $uni-text-color-inverse;
$text-color-grey: $uni-text-color-grey;
$text-color-title: $uni-text-color-title;
$primary-color: $uni-color-primary;
$warning-color: $uni-color-warning;
$highlight-color: $uni-highlight-color;
$bg-color: $uni-bg-color;
$bg-color-grey: $uni-bg-color-grey;
$border-color: $uni-border-color;

// 浅彩像素风色彩体系
$pixel-yellow: #fff3c2; // 浅鹅黄（信息背景）
$pixel-white: #f8f9fc; // 淡云白（全局背景）
$pixel-blue: #a3d2e6; // 雾湖蓝（功能主色）
$pixel-gray: #d4cdc3; // 砂岩灰（分割线）
$pixel-cream: #ffeedb; // 奶油霜（高光点缀）
$pixel-text-primary: #5c7c9f; // 雾蓝（一级标题）
$pixel-text-content: #6d6d6d; // 暖灰（正文）
$pixel-text-helper: #b3b9c2; // 银灰（辅助文字）

.post-list {
  .post-item {
    background-color: $pixel-white;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;
    position: relative;
    overflow: hidden; // 确保背景图不会溢出圆角边框

    /* 背景图样式 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* 只保留基础阴影，移除边框 */
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); // 基础阴影

    /* 柔光滤镜效果 */
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);

    /* 点击效果 */
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
      /* 鹅黄色涟漪波纹效果 - 移除边框部分 */
      box-shadow: 0 0 20rpx 4rpx rgba($pixel-yellow, 0.6), 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    }

    /* 背景遮罩层 */
    .post-background-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba($pixel-white, 0.95) 0%, rgba($pixel-white, 0.85) 40%, rgba($pixel-white, 0.75) 70%, rgba($pixel-white, 0.9) 100%);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      z-index: 1;
    }

    /* 内容容器 */
    .post-content-wrapper {
      position: relative;
      z-index: 2; // 确保内容在遮罩层之上

    // 用户信息区域
    .post-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16rpx;

      .user-info {
        display: flex;
        align-items: center;
        flex: 1;

        .user-avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin-right: 16rpx;
          border: 2rpx solid rgba($pixel-blue, 0.6);
          background-color: $pixel-gray;
        }

        .user-details {
          flex: 1;

          .username {
            font-size: 28rpx;
            font-weight: 600;
            margin-bottom: 4rpx;
            color: $pixel-text-primary;
          }

          .post-time {
            font-size: 24rpx;
            color: $pixel-text-helper;
          }
        }
      }

      // 关注按钮样式
      .follow-btn {
        padding: 8rpx 20rpx;
        border-radius: 30rpx;
        font-size: 24rpx;
        background-color: $pixel-blue;
        color: $pixel-white;
        transition: all 0.3s ease;

        /* 双层描边效果 */
        border: 2rpx solid rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 0 1rpx rgba($pixel-blue, 0.3);

        /* 柔光滤镜效果 */
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);

        /* 已关注状态 */
        &.followed {
          background-color: $pixel-gray;
          color: $pixel-text-content;
        }

        /* 点击效果 */
        &:active {
          transform: scale(0.95);
          /* 鹅黄色涟漪波纹效果 */
          box-shadow: 0 0 0 1rpx rgba($pixel-blue, 0.3), 0 0 10rpx 2rpx rgba($pixel-yellow, 0.7);
        }
      }
    }

    // 帖子内容区域
    .post-content {
      margin-bottom: 16rpx;

      .post-title {
        font-size: 32rpx;
        font-weight: 600;
        margin-bottom: 12rpx;
        color: $pixel-text-primary;
        line-height: 1.4;
      }

      .post-text {
        font-size: 28rpx;
        line-height: 1.6;
        color: $pixel-text-content;
          
          // 限制显示3行
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
      }
    }

    // 图片展示区域
    .post-images {
      margin-bottom: 16rpx;

      .image-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;

        .post-image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 12rpx;
          background-color: $pixel-gray;
          border: 1rpx solid rgba($pixel-blue, 0.3);

          /* 柔光滤镜效果 */
          backdrop-filter: blur(1px);
          -webkit-backdrop-filter: blur(1px);
        }
      }
    }

    // 话题标签样式
    .post-tags {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 16rpx;

      .post-tag {
        font-size: 24rpx;
        color: $pixel-blue;
        margin-right: 16rpx;
        margin-bottom: 8rpx;
        padding: 6rpx 16rpx;
        border-radius: 20rpx;
        transition: all 0.3s ease;

        &:active {
          color: $pixel-text-primary;
          transform: scale(0.95);
        }
      }
    }

    // 互动数据区域
    .post-stats {
      border-top: 1rpx solid rgba($pixel-gray, 0.5);
      padding-top: 16rpx;

      .stats-left {
        display: flex;

        .stat-item {
          display: flex;
          align-items: center;
          margin-right: 32rpx;

          tn-icon {
            margin-right: 8rpx;
          }

          .stat-text {
            font-size: 24rpx;
            color: $pixel-text-helper;
            margin-left: 4rpx;
            }
          }
        }
      }
    }
  }

  // 加载更多区域
  .load-more-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32rpx 0;

    .loading-content {
      display: flex;
      align-items: center;

      .loading-spinner {
        width: 32rpx;
        height: 32rpx;
        border: 3rpx solid $pixel-gray;
        border-top: 3rpx solid $pixel-blue;
        border-radius: 50%;
        margin-right: 16rpx;
        animation: spin 1s linear infinite;
      }

      .loading-text {
        font-size: 26rpx;
        color: $pixel-text-helper;
      }
    }

    .no-more {
      .no-more-text {
        font-size: 26rpx;
        color: $pixel-text-helper;
      }
    }
  }
}

// 旋转动画
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// 通用文本样式类
.title-text {
  font-weight: 600;
  color: $pixel-text-primary;
}

.content-text {
  color: $pixel-text-content;
  line-height: 1.6;
}

.helper-text {
  color: $pixel-text-helper;
  font-size: 24rpx;
}

// 像素风格卡片基础样式
.pixel-card {
  /* 16px基础像素单元但边缘虚化处理 */
  border-radius: 16rpx;

  /* 双层描边 */
  box-shadow: 0 0 0 1rpx rgba($pixel-blue, 0.3);

  /* 柔光滤镜 */
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

// 像素风格按钮基础样式
.pixel-btn {
  /* 双层描边 */
  border: 2rpx solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1rpx rgba($pixel-blue, 0.3);

  /* 柔光滤镜 */
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);

  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
    /* 鹅黄色涟漪波纹效果 */
    box-shadow: 0 0 0 1rpx rgba($pixel-blue, 0.3), 0 0 15rpx 3rpx rgba($pixel-yellow, 0.6);
  }
}
</style>
